<template>
   <div id="content">
      <div id="head">
          <el-input v-model="name" placeholder="姓名查询"></el-input>
<!--        <template>-->
<!--          <el-radio v-model="student.sex" :label="0" value="0" >男</el-radio>-->
<!--          <el-radio  v-model="student.sex" :label="1" value="1" >女</el-radio>-->
<!--        </template>-->
          <el-button type="text" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button type="text" @click="dialogVisible=true" icon="el-icon-plus">新增</el-button>
           <el-button type="warning" :disabled="multipleSelection.length==0" @click="del" icon="el-icon-delete">删除</el-button>
      </div>
     <div>
       <el-dialog
           title="提示"
           :visible.sync="dialogVisible"
           width="30%"
           :before-close="handleClose">
         <span>
           <el-form :model="student">
             <el-form-item>
               <el-input v-model="student.id" v-show="false"></el-input>
             </el-form-item>
              <el-form-item>
               <el-input  v-model="student.name" placeholder="姓名"></el-input>
             </el-form-item>
              <el-form-item>
               <template>
                  <el-radio v-model="student.sex" :label="0" value="0" >男</el-radio>
                  <el-radio  v-model="student.sex" :label="1" value="1" >女</el-radio>
               </template>
             </el-form-item>
              <el-form-item>
               <el-input v-model="student.birthday" placeholder="生日"></el-input>
             </el-form-item>
           </el-form>
         </span>
         <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
       </el-dialog>
     </div>

     <div id="tab">
       <el-table
           :data="tableData.list"
           tooltip-effect="dark"
           style="width: 100%"
           @selection-change="handleSelectionChange">
         <el-table-column
             type="selection"
             width="55">
         </el-table-column>
         <el-table-column
             label="生日"
             width="120">
           <template v-slot="scope">{{ scope.row.birthday }}</template>
         </el-table-column>
         <el-table-column
             prop="name"
             label="姓名"
             >
         </el-table-column>
         <el-table-column
             prop="sex"
             label="性别"
            >
           <template v-slot="scope">
              {{scope.row.sex==0 ? '男': '女'}}
           </template>
         </el-table-column>
         <el-table-column
             fixed="right"
             label="操作"
             width="100">
           <template v-slot="scope">
             <el-button type="text" icon="el-icon-edit" @click="show(scope.row)">编辑</el-button>

           </template>
         </el-table-column>
       </el-table>
     </div>
     <div>
       <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page="tableData.pageNum"
           :page-sizes="[2,3,4,5]"
           :page-size="tableData.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="tableData.total">
       </el-pagination>
     </div>
   </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Students",
  data(){
    return{
       tableData:[],
      name:'',
       student:{
       },
      dialogVisible: false,
      multipleSelection: []
    }
  },
  methods:{
    search(){
      alert(this.name);
       this.$http.get("student/stus", {params:{name:this.name}}).then(resp =>{
            if(resp){
              this.tableData= resp.data.data;
            }
       })


    },
    //改变每页的记录数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
         this.$http.get("student/stus",{params:{pagesize:val}}).then(resp=>{
            this.tableData= resp.data.data;
         })
    },
    //改变起始位置
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$http.get("student/stus",{params:{offset:val}}).then(resp=>{
        this.tableData= resp.data.data;
      })
    },
    //删除
    del(){
       if(confirm("?")){
           //获取选择的值
         let ids='';
         this.multipleSelection.forEach(item =>{
             ids += item.id+',';
         });
         alert(ids);
         this.$http.delete("student/"+ids).then(resp=>{
            if(resp.data.flag){
               this.$message.success(resp.data.message);
               this.findStudents();
            }else{
              this.$message.error(resp.data.message);
            }
         })

       }
    },
    show(obj){
       this.student=obj;
       // Object.assign(this.student,obj);
       this.dialogVisible=true;
    },
    //新增
    add(){
       if(this.student.name.length==0){
          this.$message.error("请输入姓名")
       }else{
           this.$http.post("student/",this.student).then(resp =>{
              if(resp.data.flag){
                 this.student={};
                 this.dialogVisible=false;
                 this.findStudents();
              }else{
                 this.$message.error("新增失败！");
              }
           })
       }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
     findStudents(){
         this.$http.get("student/stus").then(resp=>{
           if(resp){
               this.tableData= resp.data.data;
           }
        })
     },
    //实现多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  created() {
     this.findStudents();
  }
}
</script>

<style scoped>
 #head{
   float: right;
 }
 #tab{
   margin: auto;
   width: 80%;
 }
 #content{
   width: 70%;
 }
</style>
